@charset "utf-8";
@import "_reset";

$basefont:40px;
@function r($n){
    @return $n / $basefont * 1rem;
}

.web{
    width: 100%;
    height: 100vh;
    background-image: url("../img/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .container{
        width: r(576px);
        height: 72vh;
        margin: 0 auto;
        padding-top: 9vh;
        .logo{
            width: r(221px);
            height: r(194px);
            margin:  0 auto;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }     
        }
        .context{
            color: red;
        }
        input{
            opacity: .5;
            width: r(476px);
            height: r(76px);
            background-color: #ffffff;
            border-radius: r(38px);
            padding-left: r(100px);
            font-size: r(26px); 
        }
        div{
            position: relative;
            label{
                position: absolute;
                top: 30%;
                left: 5%;
                font-size: r(26px);
            }
            &:nth-child(2){
                margin-top: r(141px);
            } 
            &:nth-child(3){
                margin: r(52px) 0px;
            }
            &:last-child{
                margin-top: r(78px);
                display: flex;
                justify-content: space-between;
                button{
                    width: r(245px);
                    height: r(76px);
                    background-color: #ffffff;
                    box-shadow: 0px r(4px) r(4px) 1px 
                        rgba(0, 0, 0, 0.39);
                    border-radius: r(38px);
                    color: #0075c1;
                    font-size:  r(28px);
                    opacity: .7;
                }
            }
        }
        #card{
            width: r(376px);
            padding-left: r(200px);
            margin-top: r(50px);
        }
        .cardnum{
            top: 58%;
        }
    }
}

